<template>
    <f7-page style="background-color:white;">
    	<div style="width: 100%; height: 50px; font: 20px bold Serif; text-align: center;">
    		<div style="margin-top: 20px;">点圈地产</div>
    	</div>
    	<div style="width: 100%; height: 80px; text-align: center">
    		<img style="margin-top: 10px;" src="../../assets/logo_60.jpg" />
    	</div>
    	<f7-block inset >
	        <f7-list no-hairlines style="margin-top: -10px;">
	            <!--<f7-list-input type="text" placeholder="组织代码" label="组织代码" clear-button floating-label outline
	                :value="orgCodecd" @input="orgCode = $event.target.value">
					<f7-icon icon="doc_person" slot="media"></f7-icon>
				</f7-list-input>
	            <f7-list-input type="text" :placeholder="!isCheckCodeLogin ? '用户名' : '手机'" :label="!isCheckCodeLogin ? '用户名' : '手机'" clear-button floating-label outline
	                :value="username" @input="username = $event.target.value">
					<f7-icon icon="person" slot="media"></f7-icon>
				</f7-list-input>-->
				<f7-list-input
						label="组织代码"
						type="text"
						placeholder="组织代码"
						clear-button floating-label outline
						:value="orgCode" @input="orgCode = $event.target.value">
					<f7-icon f7="flag" slot="media"></f7-icon>
				</f7-list-input>
				<f7-list-input type="text" :placeholder="!isCheckCodeLogin ? '用户名' : '手机'"
							   :label="!isCheckCodeLogin ? '用户名' : '手机'"
							   clear-button floating-label outline
							   :value="username" @input="username = $event.target.value">
					<f7-icon :f7="!isCheckCodeLogin ? 'person' : 'phone'" slot="media"></f7-icon>
				</f7-list-input>
				<f7-list-item>
					<f7-list-input class="my-no-padding-left" :type="!isCheckCodeLogin ? 'password' : 'text'"
								   :placeholder="!isCheckCodeLogin ? '密码' : '验证码'"
								   :label="!isCheckCodeLogin ? '密码' : '验证码'"
								   :style="!isCheckCodeLogin ? {width: '100%'} : {width: '60%'}"
								   :value="credentials" @input="credentials = $event.target.value"
								   clear-button floating-label outline>
						<f7-icon :f7="!isCheckCodeLogin ? 'lock' : 'photo'" slot="media"></f7-icon>
					</f7-list-input>
					<f7-button v-show="isCheckCodeLogin" fill style="margin-right: 15px;"
							   @click="getCheckCode" :disabled="countDown > 0">
						{{countDown == 0 ? '获取验证码' : showCountDown}}
					</f7-button>
				</f7-list-item>

	        </f7-list>

	       <!-- <f7-list inline-labels style="margin-top: -40px;">

	        </f7-list>-->
    	</f7-block>
    	<f7-block inset>
    		<f7-row>
    			<f7-col>
    				<f7-button big raised round :text="isOnline ? '登录' : '离线无法登录'"
    				    :disabled="!isOnline" 
    				    @click="login"></f7-button>
    			</f7-col>
    		</f7-row>
    		<f7-row style="margin-top: 20px;">
    			<f7-col>
    				<f7-link href="#" @click="toggleCheckCodeLogin"
    					:text="isCheckCodeLogin ? '密码登录' : '验证码登录'"></f7-link>
    			</f7-col>
    			<f7-col style="text-align: right;">
    				<f7-link href="/Login/ForgetPassword">找回密码</f7-link>
    			</f7-col>
    		</f7-row>
    	</f7-block>
    </f7-page>
</template>

<script>
import axios from 'axios';
import checkCode from '@/mixins/checkCode';
import networkEvent from '@/mixins/networkEvent';
import tables from '@/utils/db/tables.js';
import Common from '@/utils/Common.js';
import request from '@/utils/request.js';
import service from '@/utils/request.js';
import { getUser, setUser, clearUser, getOrg, setOrg, clearOrg } from '@/utils/auth';
import store from '@/store';
import {getStore, setStore, clearStore} from '@/utils/storage'

var tableList = tables.list;

export default {
	mixins: [checkCode, networkEvent],
	store: store,
	data() {
		return {
			orgCode: '',
			username: '',
			credentials: '',
			isCheckCodeLogin: false
		}
	},
	methods: {
		toggleCheckCodeLogin() {
			this.credentials = '';
			this.isCheckCodeLogin = !this.isCheckCodeLogin;
		},
		getCheckCode() {
            this.toggleCheckCode();
		},
		login() {
			var self = this;
			if(!this.orgCode) {
				this.$f7.dialog.alert('', '组织代码不能为空');
				return;
			}
			if(!this.username) {
				this.$f7.dialog.alert('', (this.isCheckCodeLogin ? '手机号' : '用户名' ) + '不能为空');
				return;
			}
			if(!this.credentials) {
				this.$f7.dialog.alert('', (this.isCheckCodeLogin ? '验证码' : '密码' ) + '不能为空');
				return;
			}
			self.$f7.preloader.show();
			axios({
				methods: 'get',
				url: 'http://estate-oss.point-circle.com/' + self.orgCode + '/config.json',
			}).then(response => {
				let data = response.data;
				let org = {
					id: data.id,
					name: data.name,
					url: data.apis.find(api => api.type == 'MOBILE').url
				};
				setOrg(org);
				service.defaults.baseURL = org.url;
				return request({
					url: '/login',
					method: 'post',
					data: {
						username: self.username,
						password: self.credentials
					}
				});
			}).then(data => {
				let user = data.userInfo;
				setUser(user);
				self.$f7router.navigate('/Home');
                self.$f7.preloader.hide();
			}).catch(error=> {
				self.$f7.dialog.alert(error instanceof Error ? '获取组织机构失败' : error.detail.msg, '错误');
				self.$f7.preloader.hide();
				console.error(error);
			})
		}
	},
	watch: {
		
	},
	mounted() {
		var self = this;
		self.$f7.preloader.show();
	    new Promise((resolve, reject) => {
	        var org = getOrg();
	        if(org == null) {
	            clearUser();
	            resolve();
	            return;
	        } else {
	            this.orgCode = org.id;
	        }
	        let user = getUser();
	       	if(user == null) {
				resolve();
				return;
			}
            service.defaults.baseURL = org.url;
			if(Common.isOnline()) {
				if(user != null) {
					request({
						url: '/loginStatus',
						method: 'get'
					}).then(data => {
						user = data.userInfo;
						setUser(user);
						self.$f7router.navigate('/Home');
						resolve();
					}).catch(data => {
						clearUser();
						resolve();
					});
				} else {
					resolve();
				}
			} else {
				self.$f7router.navigate('/Home');
				resolve();
			}
		}).then(() => {
	        self.$f7.preloader.hide();
	    });
	}
}
</script>

<style>
.my-no-padding-left .item-content{
	padding-left: 0 !important;
}
</style>
